const n = `
<template>
  <s-flex direction="column" gap="1em">
    <s-button theme="primary" @click="switchListSize">切换列表大小</s-button>
    <s-waterfall columns="4" :list="list">
      <template #default="{ index, data }">
        <div class="default-waterfall__cell" :style="{ height: \`\${data}rem\` }">{{ index + 1 }}</div>
      </template>
    </s-waterfall>
  </s-flex>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";

@Component
export default class DefaultWaterfall extends Vue {
  /**
   * @description: 列表项数量
   * @private
   * @readonly
   * @type {number}
   */
  readonly counter = 20;

  /**
   * @description: 渲染列表
   * @private
   * @type {Array<number>}
   */  
  list = new Array(this.counter).fill(0).map(() => Math.ceil(10 + Math.random() * 30));

  /**
   * @description: 切换列表大小
   * @private
   * @returns
   */
  switchListSize(): void {
    this.list = new Array(this.counter).fill(0).map(() => Math.ceil(10 + Math.random() * 30));
  }
}
<\/script>

<style lang="scss" scoped>
.default-waterfall__cell {
  background-color: var(--s-background-secondary);
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
`; export { n as default };
